<template>
	<div class="orgBusinessAdd">
		<div class="title">
			<span class="left">创建业务类型</span>
			<el-button class="add" type="primary" size="small" icon="el-icon-back" @click="$router.back(-1)">返回
			</el-button>
		</div>
		<div class="main">
			<el-form ref="form" :model="form" label-width="80px">
				<el-form-item label="业务名称" style="position: relative;">
					<el-input v-model="form.name" placeholder="如：个人工商局商户业务"></el-input>
					<el-popover style="position: absolute;top: 2px;right:-30px;" placement="bottom" title="业务类型添加说明" width="300"
					 trigger="click" content="在添加业务类型时，以添加主业务为主，主业务类型添加后，可根据实际网点办理业务情况，进行添加子业务（主业务的附属业务/细分业务）">
						<i class="el-icon-info" slot="reference" style="font-size: 18px;"></i>
					</el-popover>
				</el-form-item>
				<el-form-item label="业务描述">
					<el-input v-model="form.describe" class="textArea" type="textarea" placeholder="业务描述，子业务类型以及办理业务所需材料。"></el-input>
				</el-form-item>
				<el-button class="btn" type="primary" @click="addType">提交</el-button>
			</el-form>
		</div>
	</div>
</template>
<script>
import {orgAddBusiness} from '../api/getData.js'
export default {
	name: 'orgBusinessAdd',
	data: function() {
		return {
			form: {
				name: '',
				describe: ''
			}
		}
	},
	components: {},
	created: function() {}, // 创建时
	beforeMount: function() {}, // 挂载之前
	mounted: function() {}, // 挂载之后
	beforeUpdate: function() {}, // 数据更新时调用,在渲染之前
	updated: function() {}, // 数据更新后,渲染后调用(禁止)
	beforeDestroy: function() {}, // 实例销毁前调用,解绑中间层的数据传输
	destroyed: function() {}, // 实例销毁后调用
	methods: {
		addType() {
			orgAddBusiness({
				businessName: this.form.name,
				businessDescription: this.form.describe
			}).then((res) => {
				if (res.data.code == 1) {
					this.$message({
						message: res.data.msg,
						type: 'warning'
					});
				} else if (res.data.code == 0) {
					this.$message({
						message: '添加成功',
						type: 'success'
					})
					setTimeout(() => {
						this.$router.push('/orgBusiness/orgBusinessIndex')
					}, 1000)
				} else {
					this.$message.error(res.data.msg);
				}
			}).catch((error) => {
				console.log(error)
			})
		}
	} // 函数
}
</script>
<style lang='scss'>
	.orgBusinessAdd {
		box-sizing: border-box;

		.title {
			display: flex;
			justify-content: space-between;
			align-items: center;
			height: 64px;
			line-height: 64px;
			background: #fff;
			overflow: hidden;
			text-align: left;
			padding: 0 20px;
			color: #333437;
			font-size: 16px;
		}

		.main {
			background: #fff;
			width: 100%;
			margin-top: 3%;
			padding: 5% 20%;

			.textArea {
				textarea {
					min-height: 240px !important;
				}

			}

			.el-form-item__label {
				font-weight: bold;
			}

			.btn {
				width: 120px;
				height: 32px;
				line-height: 1px;
				margin-left: 80px;
			}
		}
	}
</style>
